{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    <div class="bc03 fs7 c2 tac pad10 lh15" v-if="gpsOpen">
        <p><span  class="fa fa-circle-o-notch fa-spin"></span>正在获取位置信息</p>
        <p>为提供更好的服务，请您开启手机GPS位置功能！</p>
    </div>


    <div class="flrc pad3 bcf c11" id="top">
       <div class="fs9 flrc pos-r">
{#           <span class="fa fa-map-marker"></span>#}
           <svg t="1582123820437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12690" width="5vw" height="5vw"><path d="M 1021.17 860.861 c 0 105.164 -256.065 160.186 -509.004 160.186 c -252.949 0 -509.022 -55.0217 -509.022 -160.186 c 0 -93.3274 197.239 -132.232 282.065 -144.631 c 12.5683 -1.78093 24.2924 7.10145 26.0896 19.9304 c 1.82549 12.8537 -6.9395 24.7687 -19.5523 26.6086 c -176.643 25.8055 -232.053 73.8678 -232.053 98.0922 c 0 46.1399 169.903 107.984 452.473 107.984 c 282.56 0 452.457 -61.8444 452.457 -107.984 c 0 -24.4117 -56.0428 -72.7383 -234.391 -98.4191 c -12.6219 -1.82488 -21.4001 -13.7345 -19.627 -26.5617 c 1.79598 -12.8609 13.5196 -21.7126 26.0668 -19.9912 c 85.5383 12.3395 284.499 51.1238 284.499 144.972 Z m 0 0" p-id="12691" fill="#515151"></path><path d="M 512.163 69.8579 c 134.405 0 243.776 111.426 243.776 248.4 c 0 189.766 -188.81 402.988 -243.962 461.221 c -55.3094 -57.1717 -243.6 -266.155 -243.6 -461.221 c 0 -136.966 109.349 -248.4 243.787 -248.4 Z m -15.7767 779.83 l 15.9592 15.1716 l 15.7683 -15.3667 c 11.7458 -11.4635 287.607 -283.578 287.607 -537.194 C 815.721 141.751 679.542 3.01037 512.155 3.01037 C 344.774 3.01037 208.584 141.751 208.584 312.299 c 0 260.45 276.055 526.205 287.802 537.411 v -0.021073 Z M 414.543 302.504 c 0 -54.8332 43.7785 -99.436 97.5882 -99.436 c 53.8326 0 97.6406 44.6028 97.6406 99.436 c 0 54.8338 -43.8086 99.4589 -97.6406 99.4589 c -53.8097 0.000602 -97.5882 -44.6245 -97.5882 -99.4589 Z m 251.777 0 c 0 -86.6076 -69.1626 -157.058 -154.189 -157.058 c -84.9802 0 -154.122 70.451 -154.122 157.058 c 0 86.5992 69.1415 157.06 154.122 157.06 c 85.026 0.000602 154.189 -70.4612 154.189 -157.06 Z m 0 0" p-id="12692" fill="#515151"></path></svg>
           <span class="fs9 pad3">
               <mu-ripple @click="goto('citySelector')">[[cityName == ''?'请选择':cityName]]</mu-ripple>
           </span>
       </div>
        <div class="flex1 bc13 round30 mar5 padl10 padr5 flrc" @click="search()">
            {#<input class="flex1 marl5 tac" type="text" v-model="search" placeholder="">#}
            <div class="flex1 tac fs8 c12 padt4 pad4 op8">搜索商家、商品、服务</div>
            <div class="pos-r round padl5 padr5"><mu-ripple> <span class="fa fa-search c12"></span>  </mu-ripple></div>
        </div>
        {#<div>#}
            {#<div class="bdso padt3 padb3 padl5 padr5 fs8 round30">找服务</div>#}
        {#</div>#}
        <div class="c11 fs14 pos-r padl5 padr5 padt3" @click="goto('news')">
{#            <span class="fa fa-commenting-o"></span>#}
            <svg t="1582123550024" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11785" width="7vw" height="7vw"><path d="M817.45676485 839.42219514l-144.37694278-122.41151251H140.18933117v-533.11929746h677.26743368v655.53080997z m-620.06579232-179.61315386h496.73905355l66.12509742 56.05760852V241.09302652h-562.86415097v418.71601476z" fill="#515151" p-id="11786"></path><path d="M279.76133609 363.50453903h379.81889862v45.76131308h-379.81889862zM279.76133609 477.67901519h242.53495937v45.76131308h-242.53495937z" fill="#8a8a8a" p-id="11787"></path></svg>
        </div>
    </div>
    <div class=" pad5 ">
        <div class="round5" style="height: 30vw">
            <mu-carousel class="round5" style="height: 30vw" transition="fade">
                <mu-carousel-item class="round5" v-for="item in banner">
{#                     <img class="round5" style="width: 100vw;height: 50vw" :src="picUrl(item.pic)" onerror="this.src=pic404">#}
                     <img class="round5" style="width: 100vw;height: 30vw" :src="picUrl(item.pic)" onerror="this.src=pic404" v-if="!isTrue(item.action)">
                     <img class="round5" style="width: 100vw;height: 30vw" :src="picUrl(item.pic)" onerror="this.src=pic404" @click="goto('articlesInfo',{id:item.action})" v-if="isTrue(item.action)">
{#                     <img class="round5" style="width: 100vw;height: 50vw" src="widget://image/404.png" onerror="this.src=pic404">#}
                </mu-carousel-item>
            </mu-carousel>
        </div>
    </div>
    <div class="padlr5 " @click="goto('index')">
        <div class="bc1 c13 flrc pad5">
            <svg t="1577701266814" class="icon wh5-5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2198" width="200" height="200"><path d="M653.983758 306.78976c2.296168-3.182655 3.44745-8.83417 3.44745-16.972453l0-24.399501c0-7.773711-0.97859-12.994135-2.916581-15.645921-1.946946-2.653065-6.456133-3.978319-13.525004-3.978319l-125.705911 0c-7.076546 0-11.585733 0.97859-13.525004 2.91786-1.946946 1.946946-2.916581 6.100515-2.916581 12.464545l0 29.172204c0 8.138284 1.409681 13.70665 4.243113 16.707659 2.825757 3.008683 7.773711 4.507908 14.850257 4.507908l123.052846 0C647.354932 311.563742 651.679915 309.972415 653.983758 306.78976z" p-id="2199" fill="#ffffff"></path><path d="M958.453045 60.716048C765.301203 1.321416 514.888438 0.639601 512.639601 0.639601c-2.270584 0-252.615551 0.680536-445.858216 60.075168l-19.305718 5.927823 0.046051 446.789475c0.249444 3.81586 6.26809 94.465237 62.18841 200.601915 33.160756 63.007099 100.550402 119.403282 154.334454 167.59978 66.185917 59.349861 147.271979 106.343908 240.963299 139.663285l7.63172 2.702954 7.632999-2.702954c93.463622-33.251579 174.321987-80.039675 240.41708-139.117066 53.694508-48.01613 121.082875-104.253692 154.381784-167.076586 56.782502-107.387737 62.483906-198.024322 62.688578-201.818436l0.044772-446.642367L958.453045 60.716048zM376.84974 320.580838l0 321.952142c0 21.920407-8.843124 32.884448-26.519139 32.884448-11.320939 0-19.09465-2.651786-23.337763-7.955358-4.243113-5.304851-6.36531-13.618386-6.36531-24.92909L320.627529 437.268374c-9.200021 13.441856-18.034191 20.7768-26.520418 22.01251-8.486227 1.243384-16.268892-1.144886-23.337763-7.160973-9.198742-6.36531-13.789799-13.965049-13.789799-22.808173 0-8.83417 5.121925-20.684698 15.381126-35.537513 20.859949-29.701794 37.392357-59.934456 49.592107-90.697987 12.19975-30.763531 22.542099-63.64798 31.028326-98.654624 2.825757-14.137742 6.713253-24.48137 11.670161-31.028326 4.947954-6.538002 13.608152-9.100244 25.989549-7.691842 11.668882 1.774253 18.737752 6.896179 21.215567 15.382405 2.46886 8.486227 1.591327 20.684698-2.653065 36.597972-5.303572 20.155108-10.525275 38.544918-15.645921 55.161753C388.427798 289.469363 382.858152 305.381358 376.84974 320.580838zM766.960328 612.565113c-1.591327 4.417085-4.159965 9.28189-7.690563 14.585462-7.077825 9.547964-15.208434 13.078562-24.398222 10.608423-9.198742-2.479094-19.451547-8.487506-30.763531-18.034191-22.98982-18.746707-42.258441-36.688795-57.813539-53.836499-15.564052-17.145146-29.353851-35.088514-41.371954-53.833941l0 133.65999c0 11.313263-2.120917 19.360724-6.36531 24.134706-4.243113 4.771424-11.493631 7.159694-21.745156 7.159694-9.904862 0-17.595425-2.386991-23.072968-7.159694-5.486498-4.773982-8.221432-12.821443-8.221432-24.134706l0-111.382685c-9.903583 14.503593-21.133698 27.936495-33.681391 40.310217-12.555369 12.373722-28.37654 26.519139-47.469911 42.432413-15.564052 12.016825-28.294671 18.737752-38.189299 20.156387-9.903583 1.408402-17.85894-2.305122-23.868632-11.139292-2.833433-4.600011-4.955629-9.017096-6.36531-13.260209-1.416077-4.241834-1.508179-8.667873-0.264795-13.25893 1.23443-4.600011 3.978319-9.373993 8.221432-14.320667 4.243113-4.955629 10.607144-10.425497 19.09465-16.442864 6.008412-4.243113 13.077283-9.721936 21.215567-16.442864 8.129329-6.713253 16.616835-14.320667 25.45868-22.806894 8.83417-8.487506 17.677294-17.677294 26.520418-27.582156 8.83417-9.894628 17.146425-20.155108 24.927811-30.762252l-85.924005 0c-11.320939 0-19.359445-2.560963-24.133427-7.691842-4.773982-5.120646-7.160973-12.464545-7.160973-22.01123 0-10.251526 2.204065-17.851265 6.630104-22.806894 4.418364-4.947954 12.638517-7.425768 24.664296-7.425768l110.323506 0 0-38.718889L489.294163 372.559936c-19.451547 0-32.976551-4.591056-40.575011-13.791078-7.608694-9.191067-11.404087-23.337763-11.404087-42.431134l0-75.316861c0-19.09465 3.795393-33.150522 11.404087-42.166339 7.59846-9.017096 21.124743-13.525004 40.575011-13.525004l179.275057 0c18.382134 0 31.376269 4.333937 38.984963 12.995414 7.59974 8.669153 11.402807 23.071689 11.402807 43.226797l0 74.785992c0 19.09465-3.538273 33.241346-10.605865 42.431134-7.077825 9.200021-20.338034 13.791078-39.781906 13.791078l-63.64798 0 0 38.718889 132.069941 0c11.311984 0 19.09465 2.479094 23.336484 7.425768 4.243113 4.955629 6.36531 12.555369 6.36531 22.806894 0 9.546685-2.21174 16.890584-6.630104 22.01123-4.426039 5.13088-12.116602 7.691842-23.071689 7.691842l-94.94238 0c17.320396 21.572464 34.651026 40.576291 51.980377 57.017875 17.320396 16.442864 32.353579 29.263027 45.084199 38.455373 8.484948 6.36531 15.024229 12.198471 19.624239 17.502043 4.591056 5.304851 7.507637 10.252805 8.752301 14.851536C768.724348 603.632444 768.550377 608.140352 766.960328 612.565113z" p-id="2200" fill="#ffffff"></path></svg>
            <div class="padlr5 fs8">服务全程保障</div>
            <div class="bcf round30 flex1 marlr10 fs8 padtb3 tac">
                <div class="c11 op7">已累计服务 <span class="c1 fwb">[[statistic.orders]]</span> 人的需求</div>
            </div>
        </div>
    </div>

    <div class="pad5" v-if="isTrue(announce) && announce !='' && announce.length==2">
        <mu-carousel hide-indicators hide-controls  style="height: 16vw" interval="3333">
            <mu-carousel-item  v-for="item,index in announce[0]">
                <div class="flrc fs8 pad3 bc13 round30">
                    <div class="flex1"> [[item.text]] </div>
{#                    <div class="flex1"> [[str2time(item.createAt)]] </div>#}
                    <div class="c2  pos-r" @click="tabTo(3)">我要发布</div>
                </div>
                <div class="flrc fs8 pad3 bc13 round30 mart2">
                    <div class="flex1">
{#                        [[announce[1][index].text]]#}
                        [[announce[1][index].param.user]]
                        完成任务转到
                        <span class="c1 fwb"> [[announce[1][index].param.money]] </span>
                        佣金
                    </div>
{#                    <div class="flex1"> [[str2time(item.createAt)]] </div>#}
                    <div class="c2  pos-r" @click="tabTo(4)">我要接单</div>
                </div>
            </mu-carousel-item>
        </mu-carousel>

{#            <div class=" announce bdso round30 lh2 bc13" style="height: 2em;overflow-y: hidden">#}
{#                <ul style="display: block">#}
{#                    <li class="flrc fs8" v-for="item in announce">#}
{#                        <div class="flex1"> [[item.text]] </div>#}
{#                        <div class="c2  pos-r" @click="goto('match')">点击进入</div>#}
{#                    </li>#}
{#                </ul>#}
{#            </div>#}
{#        </div>#}
    </div>

    <div class="pad5 fs8  bdtso bdc13 bdw10">
        <div class="list-style-1 flrc pad1 martb5" @click="goto('servicesSelect')">
            <div class="flex1 fwb">服务类目 </div>
            <div class="c2 ">全部 >></div>
        </div>
    </div>

    <mu-carousel hide-controls  style="height: 55vw" interval="5140" :cycle="false" :active="active">
        <mu-carousel-item class="flex-r flex-start flex-wrap" style="height: 50vw;" v-for="catsList,page in cat10">
            <div class="flcc round10 pos-r" style="width: 20vw;" @click="goto('services',{cat1:index,cat2:-1,page:page})" v-for="item,index in catsList">
                <div class="flcc sortItem round c13 fs16">
                    <img class="wh15-15 round bdso bdcf bdw3" :src="picUrl(item.pic)" alt="" onerror="this.src=pic404">
                </div>
                <div class="op7 mart5 fs8">[[item.name]]</div>
            </div>
        </mu-carousel-item>
        <template slot="indicator" slot-scope="{ index, active }">
            <mu-button icon @click="">
                <span class="fs8"><span class="fa fa-window-minimize " :class="active?'c1':'c13'"></span></span>
            </mu-button>
        </template>
    </mu-carousel>



    <div class="flrc pad5 bdtso bdc13 bdw10">
        <div class="flrc fwb fit bdso round5 padlr5 padb1 padt2" @click="goto('articles',{cat:3})">
            <i class="fs10 c02">新闻</i>
            <i class="fs10 c05">动态</i>
        </div>
        <div class="flex1">
            <mu-carousel hide-indicators hide-controls  style="height: 6.5vw;">
                <mu-carousel-item v-for="item in news">
                    <div id="newsLine" class="padlr5 padt2"  @click="goto('articlesInfo',{id:item.id})">
                        <div style="height: 5vw;line-height: 5vw;" class="ofe fs9 op9">[[item.title]]</div>
                    </div>
                </mu-carousel-item>
            </mu-carousel>
        </div>
    </div>
    <div>
        <div class="fs8 pad5 bdtso bdc13 bdw10">
            <div class="list-style-1 flrc pad1 martb5" @click="goto('servicesRecomment')">
                <div class="flex1 fwb">严选</div>
                <div class="c2 ">更多 >></div>
            </div>
            <div class="flex-r flex-wrap mart5">
                <div class="pos-r" v-for="item in product" style="width: 30vw;">
                    <div class="wh30-30 round3" :style="picBg(item.cover)">
                    </div>
                    <div class="mart3 ofe w100">[[item.name]]</div>
                    <div class="c1 fs6">[[item.price]]元/[[item.unit]]</div>
                    <mu-ripple  @click="goto('servicesInfo',{id:item.id})" ></mu-ripple>
                </div>
            </div>
        </div>
    </div>

    <div v-for="cat in productCats">
        <div class="fs8 pad5 bdtso bdc13 bdw10">
            <div class="list-style-1 flrc pad1 martb5" @click="gotoCat(cat.cat.id)">
                <div class="flex1 fwb">[[cat.cat.name]] </div>
                <div class="c2 ">更多服务 >></div>
            </div>
            <div class="flex-r flex-wrap mart5">
                <div class="pos-r" v-for="item in cat.list" style="width: 30vw;">
                    <div class="wh30-30 round3" :style="picBg(item.cover)">
{#                        <img  class="servPic round5" :src="picUrl(item.cover)" onerror="this.src=pic404">#}
                    </div>
                    <div class="mart3 ofe">[[item.name]]</div>
                    <div class="c1 fs6">[[item.price]]元/[[item.unit]]</div>
                    <mu-ripple  @click="goto('servicesInfo',{id:item.id})" ></mu-ripple>
                </div>
            </div>
        </div>
    </div>
    <div class="fs8 pad3 bdtso bdc13 bdw10" @click="goto('fuli')">
        <div class="flcc"><img class="w70 round5" style="height: auto" src="/ApiCloud/assets/img/fuli.png" alt=""></div>
    </div>
    <div class="fs9 pad5 bdtso bdc13 bdw10">
        <mu-tabs :value.sync="curTab" inverse color="secondary" text-color="rgba(0, 0, 0, .54)" >
            <mu-tab @click="tab(0)"><span>精选服务</span></mu-tab>
            <mu-tab @click="tab(1)"><span>附近商家</span></mu-tab>
            <mu-tab @click="tab(2)"><span>最新需求</span></mu-tab>
        </mu-tabs>
        <div class="" v-if="curTab == 0">
            <div class="bc13 mart5 pos-r" v-for="item in serviceList">
                <div  style="height: 60vw;background-position: center;" :style="picBg(item.cover)"></div>
                <div class="flrc ofe lh2 pad5">
                    <div class="flex1 ofe">[[item.name]]</div>
                    <div class="c1 fs8">￥[[item.price]]/[[item.unit]]</div>
                </div>
                <mu-ripple  @click="goto('servicesInfo',{id:item.id})"></mu-ripple>
            </div>
        </div>
        <div v-if="curTab == 1">
            <div class="bc13 mart5 pos-r" v-for="item in shopList">
                <div  style="height: 60vw;background-position: center;" :style="picBg(item.head)"></div>
                <div class="flrc ofe lh2 pad5">
                    <div class="flex1 ofe">[[item.name]]</div>
                    <div class="c1 fs8"><span class="fa fa-eye padr3"></span>在售服务： [[ item.statistic.products ]] </div>
                </div>
                <mu-ripple  @click="goto('shopIndex',{id:item.id})"></mu-ripple>
            </div>
        </div>
        <div v-if="curTab == 2">
            <div class="pos-r" v-for="item in taskList">
                {% include "ApiCloud/Base/inc.task.list.base.html.twig" with {title:"发布任务",back:1} %}
                <mu-ripple  @click="goto('taskInfo',{id:item.task.id})"></mu-ripple>
            </div>
        </div>
    </div>

    <div class="pos-f r9 b9 padb20" v-show="showScroll">
        <div class="wh15-15 round bca04 fs16 c13 flcc pos-r op5">
            <mu-button small @click="showScroll = !showScroll;scrollTo('top')" fab color="darkBlack">
                <mu-icon value="arrow_upward"></mu-icon>
            </mu-button>
        </div>
    </div>
{% endblock %}
{% block myJs %}
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Kiuik0qMrnwy3tBNzXLZzIGyH59eh6Rm"></script>
{% endblock %}
